﻿@page "/components/table"

<DocsPage MaxWidth="MaxWidth.Large">
    <DocsPageHeader Title="Table" SubTitle="A sortable, filterable table with multiselection and pagination" />
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader>
                <Title>Default Table</Title>
                <Description>
                    The default table displays your data in simple rows and is responsive, it breaks into mobile layout on <CodeInline>Breakpoint.Xs</CodeInline> unless changed.<br />
                    Add the <CodeInline>DataLabel</CodeInline> property to your <CodeInline>MudTd</CodeInline> cells to properly display the column label when the table has changed to mobile layout.<br />
                    The table can be prevented from breaking into mobile layout my setting the <CodeInline>Breakpoint</CodeInline> to <CodeInline>Breakpoint.None</CodeInline>.<br />
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true">
                <TableBasicExample />
            </SectionContent>
            <SectionSource Code="TableBasicExample" ShowCode="false" GitHubFolderName="Table" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Table with pagination and filtering</Title>
                <Description>
                    The <CodeInline>&lt;MudTable></CodeInline> component supports pagination, sorting and filtering of rows as well as single and multiple row selection. To tell the table how to render your data, define a <CodeInline>&lt;RowTemplate></CodeInline>
                    containing a <CodeInline>&lt;MudTableCell></CodeInline> or a <CodeInline>&lt;td></CodeInline> for every column.
                    <br /><br />
                    Note: you can not fill this table in a conventional way, i.e. by defining multiple <CodeInline Code="<tr>" /> tags. See <MudLink Href="/components/simpletable">SimpleTable</MudLink> if you want that. Instead, you
                    pass the collection of items to be displayed to the table's <CodeInline>Items</CodeInline> parameter.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true">
                <TableExample />
            </SectionContent>
            <SectionSource Code="TableExample" ShowCode="false" GitHubFolderName="Table" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Sorting</Title>
                <Description>
                    To enable sorting add <CodeInline>&lt;MudTableSortLabel></CodeInline> to the header cells and define a function that simply returns the value which should be sorted by when sorting by the specific column.
                    Click on a header to sort the table by that column then click to cycle through sorting directions.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true">
                <TableSortingExample />
            </SectionContent>
            <SectionSource Code="TableSortingExample" ShowCode="true" GitHubFolderName="Table" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Multi-Selection</Title>
                <Description>
                    Setting <CodeInline>MultiSelection="true"</CodeInline> will enable selection check boxes for selecting multiple lines.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true">
                <TableMultiSelectExample />
            </SectionContent>
            <SectionSource Code="TableMultiSelectExample" ShowCode="true" GitHubFolderName="Table" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Fixed header</Title>
                <Description>
                    Set <CodeInline>FixedHeader="true"</CodeInline> to make the header sticky when scrolling the table. The table will scroll if you constrain its height using <CodeInline>Height="400px"</CodeInline> for instance.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true">
                <TableFixedHeaderExample />
            </SectionContent>
            <SectionSource Code="TableFixedHeaderExample" ShowCode="false" GitHubFolderName="Table" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>With Column Group and Text Alignment</Title>
                <Description>
                    Specifies a group of one or more columns in a table for formatting.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true">
                <TableColGroupExample />
            </SectionContent>
            <SectionSource Code="TableColGroupExample" ShowCode="false" GitHubFolderName="Table" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Inline Edit Mode</Title>
                <Description>
                    Provides input elements for Selected Row.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true">
                <TableInlineEditExample />
            </SectionContent>
            <SectionSource Code="TableInlineEditExample" ShowCode="false" GitHubFolderName="Table" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Server Side Filtering, Sorting and Pagination</Title>
                <Description>
                    Set <CodeInline>ServerData</CodeInline> to load data from the backend that is filtered, sorted and paginated. Table will call this async function whenever the user navigates
                    the pager or changes sorting by clicking on the sort header icons. In this example we also show how to force the table to update when the search textfield blurs, so that the table reloads server-filtered data.
                    <MudAlert Severity="Severity.Info" Dense="true" Class="mt-3">
                        Note: with a <CodeInline>ServerData</CodeInline> func you don't need <CodeInline>Items</CodeInline> and <CodeInline>Filter</CodeInline>.
                    </MudAlert>
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true">
                <TableServerSidePaginateExample />
            </SectionContent>
            <SectionSource Code="TableServerSidePaginateExample" ShowCode="false" GitHubFolderName="Table" />
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader>
                <Title>Table With related data</Title>
                <Description>
                    Making use of the <CodeInline>&lt;ChildRowContent&gt;</CodeInline> allows more control over the layout for scenarios such as showing the related address data for each person below.
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" FullWidth="true">
                <TableRelationalExample />
            </SectionContent>
            <SectionSource Code="TableRelationalExample" ShowCode="false" GitHubFolderName="Table" />
        </DocsPageSection>

    </DocsPageContent>
</DocsPage>


